<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@include file="../../common/header.jsp"%>

<%@ include file="../../common/init.jsp"%>

<script src="${ctx}/static/00100/javascripts/gopay/scan/wechatPay.js"></script>
<script type="text/javascript" src="${ctx}/static/00100/javascripts/gopay/scan/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="${ctx}/static/00100/javascripts/gopay/scan/jquery.qrcode.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>支付宝支付</title>
    <style>
        html,body,div,ul,li{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 962px;
            margin: 0 auto;
        }
        .detail{
            width: 958px;
            height: 70px;
            margin: 30px 0;
            border: 2px solid #aec4e2;
        }
        .detail ul{
            width: 100%;
            height: 35px;
        }
        .detail ul li{
            height: 35px;
            line-height: 35px;
            float: left;
            list-style: none;
            font-size: 16px;
            text-align: center;
        }
        .title{
            border-bottom: 1px solid #aec4e2;
            background: #f3f6f9;
            color: #397ec9;
        }
        .code{
            width: 960px;
            height: 480px;
            padding-top: 50px;
            border: 1px solid #aec4e2;
        }
        .name{
            width: 30%;
        }
        .no{
            width: 20%;
        }
        .money{
            width: 15%;
        }
        .time{
            width: 35%;
        }
        .red{
            color: #f00;
        }
        .pay,.phone{
            float: left;
        }
        .pay{
            width: 330px;
            margin: 0 80px 0 150px;
        }
        .phone{
            padding-top:10px;
        }
        .check{
            display: block;
            border: none;
            margin: 0 auto 20px;
        }
        .codebox{
            width: 260px;
            margin: 0 auto 10px;
            border:1px solid #ccc;
        }
        .codetitle{
            display: block;
            height: 46px;
            line-height: 46px;
            text-align: center;
            width: 100%;
            background: #f1faf1;
            font-size: 14px;
        }
        .codepic{
            width: 260px;
            padding: 30px 0;
            text-align: center;
        }
        .remind{
            font-size: 14px;
            padding-left: 5px;
        }
    </style>
</head>
<body>

<form id="formId" name="formId">

    <input type="hidden" id="orderId" name="orderId" value="${orderId}">
    <input type="hidden" id="orderKey" name="orderKey" value="${orderKey}">
    <input type="hidden" id="bankCode" name="bankCode" value="${bankCode}">
    <input type="hidden" id="qrCode" name="qrCode"  value="${qrCode}">

</form>

<div class="container">

    <jsp:include page="../../content/orderDtl.jsp" flush="true"/>

    <div class="code">
        <div class="pay">
            <img class="check" src="${ctx}/static/00100/images/ali.png" >
            <div class="codebox">
                <span class="codetitle">请使用支付宝扫一扫，扫描二维码支付</span>
                <div class="codepic" id="output">
                </div>
            </div>
            <div class="remind" id="scanPayTips"></div>
        </div>
        <div class="phone">
            <img src="${ctx}/static/00100/images/phone_ali.png" >
        </div>
    </div>
</div>
<script>
jQuery(function(){
	var url = $('#qrCode').val();
	if(url.indexOf("weixin://wxpay/") != 0){
	  var start = url.indexOf("weixin://wxpay/");
	  url = url.substring(start)
	}
    jQuery('#output').qrcode({width:191,height:191, text:url});
    $('#output').attr("src", url);
});

</script>

<%@include file="../../common/footer.jsp"%>
